<template>
  <q-field
    outlined
    dense
    ref="field"
    :value="text"
    :readonly="readonly"
    :rules="required?[requiredTest]:undefined"
    :label="label"
    class="input-Date"
  >
    <q-popup-proxy
      ref="qDateProxy"
      transition-show="scale"
      transition-hide="scale"
      @before-show="toggle"
      v-if="!disable"
    >
      <div>
        <q-date minimal mask="YYYY-MM-DD" :range="range" :value="value" @input="input" />
      </div>
    </q-popup-proxy>
    <template #control>{{text}}</template>
    <template v-slot:append v-if="!readonly">
      <q-icon :name="range?'date_range':'today'" color="primary" class="cursor-pointer" />
    </template>
  </q-field>
</template>

<script>

export default {
  name: 'InputDate',
  props: {
    value: [String, Object],
    required: Boolean,
    readonly: Boolean,
    range: Boolean,
    disable: Boolean,
    label: String,
  },
  computed: {
    text() {
      let t = this.value;
      if (this.range) {
        t = t && t.from ? `${t.from} ~ ${t.to}` : '';
      }
      return t;
    },
  },
  methods: {
    toggle() {
    },
    input(v) {
      if (this.range) {
        if (!v) {
          v = {
            from: '',
            to: '',
          };
        } else if (!v.from) {
          v = {
            from: v,
            to: v,
          };
        }
      }
      this.$emit('input', v);
    },
    validate() {
      return this.$refs.field.validate();
    },
    resetValidation() {
      return this.$refs.field.resetValidation();
    },
  },
};
</script>
